<template>
  <div
    class="codes"
    @click="transCodec"
  >
    <!-- <svg t="1492500959545" @click="toggleClick" class="svg-icon codes" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
    </svg> -->
  </div>
</template>

<script>
export default {
  name: 'Codes',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
    /* toggleClick: {
            type: Function,
            default: null
        } */
  },
  data() {
    return {
      can: '',
      ctx: '',
      codeArr: [],
      fallArr: [],
      fsize: 14,
      speed: 0,
      w: 0,
      h: 0
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    console.log('codec beforeDestroy')
  },
  methods: {
    init() {
      console.log('init:', this.can, this.ctx)
    },
    transCodec() {
      console.log('transCodec -clickEventer')
      if (this.can) return
      this.can = document.createElement('canvas')
      document.body.appendChild(this.can)
      this.can.id = 'codecs'
      this.ctx = this.can.getContext('2d')
      this.w = this.can.width = window.innerWidth
      this.h = this.can.height = window.innerHeight
      // this.$emit('transCodec', true)
      // this.codeArr = document.body.textContent.replace(/\n|\r|\t|\s/img, '').slice(0, 1000).split('')
      this.codeArr = document.body.textContent.replace(/\n|\r|\t|\s/img, '').split('')
      this.fallArr = new Array(this.w / this.fsize >> 0).fill(1)
      this.repeater()
      this.clearRect()
    },
    initCodes() {
      const { random } = Math
      this.ctx.save()
      this.ctx.beginPath()
      this.ctx.fillStyle = '#0f0'
      this.ctx.fill()
      for (var i = 0; i < this.fallArr.length; i++) {
        // this.ctx.fillText(this.codeArr[random() * this.codeArr.length | 0], i * this.fsize, this.fallArr[i] * this.fsize)
        this.ctx.fillText(this.codeArr[this.speed % this.codeArr.length], i * this.fsize, this.fallArr[i] * this.fsize)
        if (this.fallArr[i] * this.fsize > this.h && random() < 0.02) {
          this.fallArr[i] = 0
        }
        this.fallArr[i]++
      }
      this.ctx.closePath()
      this.ctx.restore()
    },
    repeater() {
      if (!this.ctx) return
      this.ctx.fillStyle = 'rgba(0, 0, 0, .02)'
      this.ctx.fillRect(0, 0, this.w, this.h)
      window.requestAnimationFrame(this.repeater)
      ++this.speed
      this.speed & 1 && this.initCodes()
    },
    bodyKeyDown(e) {
      console.log(e)
      if (e.key !== 'q' || !this.ctx) return
      this.ctx.clearRect(0, 0, this.w, this.h)
      window.cancelAnimationFrame(this.repeater)
      document.body.removeChild(this.can)
      this.speed = this.w = this.h = 0
      this.codeArr = this.fallArr = []
      this.can = this.ctx = ''
    },
    clearRect() {
      document.body.removeEventListener('keydown', this.bodyKeyDown)
      document.body.addEventListener('keydown', this.bodyKeyDown)
    }
  }
}
</script>

<style>
.codes {
    display: inline-block;
    width: 20px;
    height: 20px;
}
#codecs{
    top: 0 !important;
    z-index: 99999;
    /*background: rgba(0, 0, 0, .5);*/
}
.codes.is-active {
    transform: rotate(90deg);
}
</style>
